<script setup>
import { ref, toRef, reactive } from 'vue'
import { RouterView, useRouter } from 'vue-router'
import { useDataStore } from '@/stores/user.js'
import Data from "./js/MenuList"

// 侧边栏数据
const menu = ref([

])
 menu.value = Data.MenuList 
// 侧边栏展示
const isCollapse = ref(false)

// 用户信息
const userInfo = useDataStore()
const user = reactive({
  username: toRef(userInfo.userData.adminname)
})

// 显示隐藏侧边栏
function change() {
  // console.log(isCollapse.value)
  isCollapse.value = !isCollapse.value
}

const router = useRouter()
const breadcrumbList = ref([])

// menu导航点击文字数据
function handleClick(pName, cName) {
  breadcrumbList.value = [pName, cName]
}

function toIndex() {
  router.push({ path: '/home' })
  breadcrumbList.value = []

  setTimeout(() => {
    history.go(0)
  }, 200)
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside class="aside">
        <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
          <el-radio-button :label="isCollapse" @click="change">expand</el-radio-button>
        </el-radio-group> -->
        <el-menu :collapse="isCollapse" active-text-color="#ffd04b" background-color="#545c64"
          class="el-menu-vertical-demo" default-active="/home" text-color="#fff" router>
          <el-menu-item>
            <img class="logo" v-if="!isCollapse" src="http://1000phone.com/img/logo.f40a184b.png" />
          </el-menu-item>
          <el-menu-item index="/home">
            <el-icon :size="20">
              <!-- <HomeFilled /> -->
              <component is="HomeFilled"></component>
            </el-icon>
            <span @click="breadcrumbList = []">首页</span>
          </el-menu-item>
          <el-sub-menu v-for="(item,index) in menu" :index="String(index)">
            <template #title>
              <el-icon :size="20">
                <component :is="item.logo"></component>
              </el-icon>
              <span>{{ item.menuname }}</span>
            </template>
            <el-menu-item-group v-for="ite in item.children">
              <el-menu-item :index="ite.path || String(ite.path)" @click="handleClick(item.menuname, ite.menuname)">{{ ite.menuname }}</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <button class="btn" @click="change">
            <component :is="!isCollapse ? 'Fold' : 'Expand'"></component>
          </button>
          <div>
            欢迎：{{ user.username }}
            <el-dropdown>
              <span class="el-dropdown-link">
                <el-icon class="el-icon--right">
                  <User />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>设置</el-dropdown-item>
                  <el-dropdown-item>退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        <el-main>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item @click="toIndex">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-for="item in breadcrumbList">{{ item }}</el-breadcrumb-item>
          </el-breadcrumb>
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<style scoped lang="scss">
@import './css/app.scss';
</style>